<template>
  <view class="content">
    <view class="header">
      <image src="/static/icon_my_person.png" mode="" class="pic1"></image>
      <view class="txt">期货行情</view>
      <image src="/static/icon_search.png" mode="" class="pic1"></image>
    </view>

    <swiper
      class="swiper"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      indicator-active-color="#FFFFFF"
    >
      <swiper-item>
        <view class="swiper-item"
          ><image src="/static/banner.png" mode="widthFix"></image
        ></view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item"
          ><image src="/static/banner.png" mode="widthFix"></image
        ></view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item"
          ><image src="/static/banner.png" mode="widthFix"></image
        ></view>
      </swiper-item>
    </swiper>

    <view class="indexs">
      <view class="options number-line">
        <view class="titles">上证指数</view>
        <view class="number gray">3575.13</view>
        <view class="number-second-line">
          <text class="need-right">-12.36</text>
          <text>-0.35%</text>
        </view>
      </view>
      <view class="options number-line">
        <view class="titles">深证指数</view>
        <view class="number red">3575.13</view>
        <view class="number-second-line red">
          <text class="need-right">+12.36</text>
          <text>+0.35%</text>
        </view>
      </view>
      <view class="options">
        <view class="titles">沪深指数</view>
        <view class="number">3575.13</view>
        <view class="number-second-line">
          <text class="need-right">-12.36</text>
          <text>-0.35%</text>
        </view>
      </view>
    </view>
    <!-- 最新资讯 -->
    <view class="news">
      <image src="/static/icon_notice.png" mode=""></image>
      <view class="message"> 最新资讯最新资讯最新资讯 </view>
    </view>
    <!--	新闻咨询  -->
    <view class="newss">
      <text>新闻资讯</text>
    </view>

    <!-- 每一条新闻资讯 -->
    <view
      v-for="(item, index) in option"
      :key="index"
      class="newss-main"
      @click="gotoDetail"
    >
      <image :src="item.pic" mode="widthFix"></image>
      <view class="right-s">
        <view class="right-s-tit">
          {{ item.name }}
        </view>
        <view class="right-s-desc">
          {{ item.desc }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      autoplay: true,
      interval: 2000,
      indicatorDots: true,
      duration: 500,
      // 新闻自选
      option: [
        {
          pic: "/static/myBGP.png",
          name: "科创版",
          desc: "科创版胡秒描述会很长秒描述会很长秒描述会很长秒描述会很长秒描述会很长秒描述会很长",
        },
        {
          pic: "/static/myBGP.png",
          name: "科创版",
          desc: "科创版胡秒描述会很长秒描述会很长秒描述会很长秒描述会很长秒描述会很长秒描述会很长",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    gotoDetail() {
      uni.navigateTo({
        url: "/pages/news/news",
      });
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background-color: #000000;
}

.header {
  height: 90rpx;
  background: #0e0e0e;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pic1 {
    width: 40rpx;
    height: 40rpx;
    // border-radius: 40rpx;
  }

  .txt {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
}

.swiper {
  height: 320rpx;
  background: #000000;
}

.swiper-item image {
  width: 100%;
}

.indexs {
  margin-top: 20rpx;
  width: 750rpx;
  height: 220rpx;
  background: #242426;
  box-sizing: border-box;
  padding: 45rpx 35rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // .number-line {
  // 	border-right: 1px solid gray;
  // }

  .options {
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    width: 33%;
    box-sizing: border-box;

    .titles {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #dedede;
      text-align: center;
    }

    .number {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1dec2b;
      margin-top: 26rpx;
      text-align: center;
    }

    .number.red {
      color: #db1414;
    }

    .gray {
      border-right: 1px solid gray;
    }

    .number-second-line {
      display: flex;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-top: 20rpx;
      color: #1dec2b;
    }

    .number-second-line.red {
      color: #db1414;
    }

    .number-second-line text {
      flex: 1;
      text-align: right;
      padding: 0rpx 20rpx;
    }

    .number-second-line .need-right {
      text-align: left;
    }
  }
}

.news {
  width: 750rpx;
  height: 70rpx;
  background: #242426;
  margin-top: 20rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
  }

  .message {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #979797;
  }
}

.newss {
  width: 750rpx;
  height: 70rpx;
  background: #242426;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #db1414;
  padding-left: 120rpx;

  text {
    border-bottom: 3rpx solid #db1414;
    padding-bottom: 10rpx;
  }
}

.newss-main {
  min-height: 200rpx;
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  display: flex;

  image {
    width: 200rpx;
    margin-right: 20rpx;
  }

  .right-s-tit {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #e9e9e9;
    margin-bottom: 16rpx;
  }

  .right-s-desc {
    width: 459rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #e9e9e9;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>
